.reader-feed-header .reader-feed-header__site {
	display: flex;
	flex-direction: column;
	padding-top: 5px;
}

.reader-feed-header__site-icon {
	align-self: center;
	padding-bottom: 20px;
}

.reader-feed-header__site-icon .site-icon.is-blank {
	height: 30px !important; // Prevents Settings from overlapping with Site Title
	visibility: hidden;
}

.reader-feed-header .reader-feed-header__site-badge {
	color: var( --color-text-subtle );
	padding-right: 4px;
	line-height: 0;
	position: relative;
	vertical-align: middle;
}

.reader-feed-header__site .reader-feed-header__site-title {
	align-self: stretch;
	font-family: $serif;
	font-size: 21px;
	font-weight: 600;
	max-height: 16px * 4;
	overflow: hidden;
	position: relative;
	text-align: center;
	white-space: normal;

	.reader-feed-header__site-title-link,
	.reader-feed-header__site-title-link:visited {
		color: var( --color-primary );
	}

	&::after {
		@include long-content-fade( $size: 15% );
		height: 16px * 1.7;
		top: auto;
	}

	@include breakpoint( '<960px' ) {
		max-height: 16px * 5.9;
	}
}

.reader-feed-header {
	margin: 0 auto;
	margin-bottom: 40px;
	position: relative;
	z-index: z-index( 'root', '.reader-feed-header' );

	@include breakpoint( '<660px' ) {
		margin: 20px 13px;
	}

	.reader-feed-header__back-and-follow {
		display: flex;
		justify-content: flex-end;
		height: 0;
		margin-left: auto;

		@include breakpoint( '<960px' ) {
			margin-left: 0;
		}
	}

	// Follow count and Follow(ing) button
	.reader-feed-header__follow {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-end;
		z-index: z-index( '.reader-feed-header__back-and-follow', '.reader-feed-header__follow' );
			position: relative;
				top: -4px;

		@include breakpoint( '<960px' ) {
			margin-bottom: 10px;
		}
	}

	.reader-feed-header__follow-count {
		color: var( --color-text-subtle );
		font-size: 14px;
		margin-right: 15px;

		@include breakpoint( '<960px' ) {
			display: none;
		}
	}

	.reader-feed-header__follow-and-settings {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.reader-feed-header__follow-button .follow-button {

		.follow-button__label {

			@include breakpoint( '<660px' ) {
				display: inline-block;
			}

			@include breakpoint( '<480px' ) {
				display: none;
			}
		}
	}

	&.has-back-button {

		.header-cake .button {
			max-width: none;
		}

		.reader-feed-header__site {
			margin-top: 0;
		}
	}

	.reader-feed-header__details {
		align-self: stretch;
		font-size: 14px;
		overflow: hidden;
		text-align: center;
		position: relative;

		.reader-feed-header__description {
			display: block;
			position: relative;

			@include breakpoint ( '<660px' ) {
				max-height: 16px * 4;
				overflow: hidden;

				&::after {
					@include long-content-fade( $size: 15% );
					height: 16px * 1.3;
					top: auto;
				}
			}
		}
	}

	.reader-feed-header__site {
		z-index: z-index( '.reader-feed-header', '.reader-feed-header__site' );
	}
}

.reader-feed-header .reader-feed-header__byline {
	display: block;
}

.reader-feed-header .card {
	background: none;
	box-shadow: none;
	padding: 0;

	@include breakpoint( '<660px' ) {
		box-sizing: border-box;
		padding: 16px;
	}

	&.reader-feed-header__site {
		margin: 0 auto;
		padding: 0;
	}
}

.reader-feed-header__email-settings .reader-site-notification-settings .gridicons-cog {

	@include breakpoint( '<660px' ) {
		left: -4px;
	}
}

.reader-feed-header__email-settings .reader-site-notification-settings__button-label {

	@include breakpoint( '<660px' ) {
		display: inline;
	}

	@include breakpoint( '<480px' ) {
		display: none;
	}
}

// Loading placeholder
.reader-feed-header.is-placeholder {
	pointer-events: none;
	user-select: none;

	.site__title,
	.site__domain,
	.feed-header__description,
	.feed-header__follow-count {
		color: transparent;
		background-color: var( --color-neutral-0 );
		animation: loading-fade 1.6s ease-in-out infinite;
	}
}
